<template>
  <div>
    城市列表

    <van-index-bar :index-list="indexList">
      <template v-for="(item, index) in city">
        <van-index-anchor :key="index" :index="item.initial" />
        <van-cell
          v-for="(i, ikey) in item.list"
          :key="index + '-' + ikey"
          :title="i.name"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
//1引入 axios
import axios from "axios";

export default {
  name: "Citylist",
  data: function () {
    return {
      city: [],
      type: true,
      top: 0,
      indexList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  created() {
    axios.get("/json/city.json").then((res) => {
      console.log(res);
      this.city = res.data.city;
    });
  },
};
</script>

<style>
</style>